<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div v-cloak>
        <ai-spider @success="successHandle" @error="errorHandle" spiderId="BLOG"  ref="aiSpider" ></ai-spider>

        <el-button v-if="btns.create_news" size="small" type="primary" icon="el-icon-copy-document"
            @click="newCopyHandle">文章搬家
        </el-button>

        <el-dialog element-loading-text="文章搬家中…" v-loading="loading" title="文章搬家" width="500px"
            @close="elDialogCloseHandle" :visible.sync="showNewCopyForm" :close-on-click-modal="false"
            :close-on-press-escape="false">
            <el-form label-position="top" ref="newCopyForm" :model="newCopyForm" :rules="newsCopyFormRules"
                label-width="80px">
                <el-form-item label="" prop="blogUrl">
                    <el-input v-model="newCopyForm.blogUrl" placeholder="请输入公众号文章页面网址" />
                </el-form-item>
            </el-form>

            <div slot="footer" style="display: flex;align-items: center;justify-content: space-between;">
                <span slot="label" class="form-label">
                    <el-popover placement="right-start" width="385" trigger="hover">
                        <div>右上角三个点—复制链接</div>
                        <el-image :src="require('@/assets/images/copy_weapp_news.png')"
                            style="width: 360px;height: 800px" />
                        <span slot="reference">如何复制公众号网址 <el-button icon="el-icon-question" type="text" /> </span>
                    </el-popover>
                </span>
                <div style="display: flex;align-items: center; justify-content: right">
                    <el-button size="small" icon="el-icon-close" @click="elDialogCloseHandle">取消</el-button>
                    <el-button size="small" icon="el-icon-check" type="primary" @click="submitHandle">确定
                    </el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>


<script>
import AiSpider from "@/components/AiSpider/index.vue";
export default {
    data() {
        return {
            showNewCopyForm: false,
            loading: false,
            newsCopyFormRules: {
                blogUrl: [
                    { required: true, message: "请输入公众号文章页面网址", trigger: "blur" },
                    // 以 https://mp.weixin.qq.com/s 开头
                    { pattern: /^https:\/\/mp.weixin.qq.com\/s/, message: "请输入正确的公众号文章页面网址", trigger: "blur", },
                ],
            },
            newCopyForm: {
                blogUrl: "",
            },
        };
    },
    props: {
        btns: {type: Object, default: null},
    },

    components: {
        AiSpider,
    },

    mounted: function () {

    },

    computed: {

    },

    methods: {
        
        newCopyHandle: function () {
            this.showNewCopyForm = true;
        },
        elDialogCloseHandle() {
            this.newCopyForm.blogUrl = "";
            this.showNewCopyForm = false;
            this.$refs['newCopyForm'].resetFields();
        },

        successHandle: function(){
            this.$emit("done");
        },
        errorHandle: function(){
        },

        submitHandle: function () {

            this.$refs['newCopyForm'].validate((valid) => {

                if (!valid) {
                    return false;
                }
                //this.loading = true;
                this.newCopyForm.blogUrl = this.newCopyForm.blogUrl.trim();
                this.$refs.aiSpider.run({url: this.newCopyForm.blogUrl}, () => {
                    this.showNewCopyForm = false;
                });
             
            });


        },
    },
};
</script>

<style scoped></style>
